<template>
    <div class="flow-demo">
        <h2>中国地图 - 飞线可视化示例</h2>
        <div class="panel">
            <div class="controls">
                <el-select v-model="mapName" style="width: 160px">
                    <el-option label="中国" value="china" />
                    <el-option label="马鞍山市" value="anshanmaJson" />
                </el-select>
                <el-switch v-model="dynamic" active-text="动态" inactive-text="静态" />
                <el-select v-model="arrowSymbol" style="width: 120px">
                    <el-option label="箭头" value="arrow" />
                    <el-option label="圆点" value="circle" />
                    <el-option label="三角" value="triangle" />
                </el-select>
                <el-slider v-model="effectPeriod" :min="1" :max="10" :step="1" show-input style="width: 240px" />
                <el-divider direction="vertical" />
                <el-select v-model="palette" style="width: 160px">
                    <el-option label="默认（绿→黄→红）" value="default" />
                    <el-option label="蓝色系" value="blue" />
                    <el-option label="自定义" value="custom" />
                </el-select>
                <el-select v-model="colorSpace" style="width: 120px">
                    <el-option label="HSV渐变" value="hsv" />
                    <el-option label="RGB渐变" value="rgb" />
                </el-select>
                <el-color-picker v-if="palette === 'custom'" v-model="customColors[0]" />
                <el-color-picker v-if="palette === 'custom'" v-model="customColors[1]" />
                <el-color-picker v-if="palette === 'custom'" v-model="customColors[2]" />
                <el-switch v-model="colorByValue" active-text="颜色随数量" />
                <el-switch v-model="fixedWidth" active-text="固定线宽" />
                <el-switch v-model="fixedOpacity" active-text="固定透明" />
                <el-switch v-model="ripple" active-text="端点波纹" />
                <el-switch v-model="fixedPointSize" active-text="固定端点尺寸" />
                <el-color-picker v-model="lineColor" :predefine="['#19D2FF', '#FF6D00', '#00C853', '#8E24AA']" />
                <el-button @click="shuffle" type="primary">随机流向</el-button>
            </div>
            <ChinaFlowMap :title="'飞线流向 (' + mapName + ')'" :map-name="mapName" :flows="flows" :height="520"
                :dynamic="dynamic" :arrow-symbol="arrowSymbol" :effect-period="effectPeriod" :color-scheme="colorScheme"
                :color-by-value="colorByValue" :fixed-width="fixedWidth" :fixed-opacity="fixedOpacity"
                :color-space="colorSpace" :width-range="widthRange" :opacity-range="opacityRange"
                :line-color="lineColor" :fixed-point-size="fixedPointSize" :point-size="pointSize"
                :point-size-range="pointSizeRange" :ripple="ripple" ripple-brush="stroke" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ChinaFlowMap } from '@/components/charts'

type Flow = { from: string; to: string; value?: number; color?: string }

const mapName = ref<'china' | 'anshanmaJson'>('china')

const flows = ref<Flow[]>([
    { from: '北京', to: '上海', value: 10 },
    { from: '北京', to: '广东', value: 8 },
    { from: '上海', to: '四川', value: 7 },
    { from: '广东', to: '浙江', value: 6 },
])

const dynamic = ref(true)
const arrowSymbol = ref<'arrow' | 'circle' | 'triangle'>('arrow')
const effectPeriod = ref(4)
// 线条样式
const colorByValue = ref(true)
const palette = ref<'default' | 'blue' | 'custom'>('default')
const colorSpace = ref<'hsv' | 'rgb'>('hsv')
const fixedWidth = ref(false)
const fixedOpacity = ref(true)
const widthRange = ref<[number, number]>([1, 5])
const opacityRange = ref<[number, number]>([0.5, 0.9])
const lineColor = ref('')
const colorScheme = ref<string[]>([])
const customColors = ref<string[]>(['#00FF00', '#FFFF00', '#FF0000'])
// 端点样式
const ripple = ref(true)
const fixedPointSize = ref(false)
const pointSize = ref(10)
const pointSizeRange = ref<[number, number]>([6, 22])

const candidatesChina = [
    '北京', '上海', '广东', '浙江', '江苏', '四川', '湖北', '河南', '福建', '山东', '陕西', '湖南', '安徽', '江西', '重庆', '天津', '辽宁', '吉林', '黑龙江'
]

const shuffle = () => {
    const pick = (arr: string[]) => arr[Math.floor(Math.random() * arr.length)]
    const list: Flow[] = []
    for (let i = 0; i < 8; i++) {
        let a = pick(candidatesChina)
        let b = pick(candidatesChina)
        while (b === a) b = pick(candidatesChina)
        list.push({ from: a, to: b, value: Math.floor(Math.random() * 12) + 4 })
    }
    flows.value = list
}

// 根据选择更新调色板
watch([palette, customColors], () => {
    if (palette.value === 'default') {
        colorScheme.value = ['#00FF00', '#FFFF00', '#FF0000']
    } else if (palette.value === 'blue') {
        colorScheme.value = ['#A0E9FF', '#19D2FF', '#00A8FF', '#0078FF', '#0047FF']
    } else {
        colorScheme.value = [...customColors.value]
    }
}, { deep: true, immediate: true })
</script>

<style scoped>
.flow-demo {
    padding: 20px;
}

.panel {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
}

.controls {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
</style>
